<!-- bootstrap样式(通过TAB的id切换tab)
<div>	
   <ul class="nav nav-pills">
        <li role="presentation" [class.active]="tab.id===activeId" *ngFor="let tab of tabs;let idx=index" role="button">
        	<a (click)="select(tab.id,idx)">{{tab.title}}</a>
        </li>
   </ul>
   <div class="tab-content">
   	    <ng-container *ngFor="let tab of tabs">
   	    	用active隐藏其它非活动的tab *ngIf="tab.id===activeId" 用ngIf控制则是销毁非活动的tab
   	    	<div class="tab-pane {{tab.id===activeId ? 'active' : null}}">
   	    		<ng-template [ngTemplateOutlet]="tab.contentTpl.templateRef"></ng-template>
   	    	</div>
   	    </ng-container>
   </div>
</div>
-->

<!--非bootstrap样式(通过TAB的id切换tab)

<div class="m-tabs">	
   <ul class="m-tab">
        <li *ngFor="let tab of tabs;let idx=index" 
            (click)="select(tab.id,idx)" 
            [class.t-active]="tab.id===activeId"
            role="button">
           {{tab.title}}
        </li>
   </ul>
   <div class="m-tab-content">
   	    <ng-container *ngFor="let tab of tabs" >
   	    	<div class="m-tab-pane" *ngIf="tab.id===activeId">
   	    		<ng-template [ngTemplateOutlet]="tab.contentTpl.templateRef"></ng-template>
   	    	</div>
   	    </ng-container>
   </div>
</div>
-->

<!--非bootstrap样式(通过Tab的index切换tab)
<div class="m-tabs">	
   <ul class="m-tab">
        <li *ngFor="let tab of tabs;let idx=index" 
            (click)="select(idx)" 
            [class.t-active]="idx===activeId"
            role="button">
           {{tab.title}}
        </li>
   </ul>
   <div class="m-tab-content">
   	    <ng-container *ngFor="let tab of tabs;let idx=index" >
   	    	<div class="m-tab-pane" *ngIf="idx===activeId">
   	    		<ng-template [ngTemplateOutlet]="tab.contentTpl.templateRef"></ng-template>
   	    	</div>
   	    </ng-container>
   </div>
</div>
-->

<!--Tab标签底部带滑动效果(通过Tab的index切换tab)-->
<div class="m-tabs">	
   <ul class="m-tab" [style.min-width.px]="tabs.length*100">
        <li *ngFor="let tab of tabs;let idx=index" 
            (click)="select(idx)" 
            [class.t-active]="idx===activeId"
            role="button">
           {{tab.title}}
        </li>
   </ul>
   <div class="m-tab-bottom" [ngStyle]="{'transform':'translateX('+activeId*100+'px)'}"></div>
   <div class="m-tab-content">
   	    <ng-container *ngFor="let tab of tabs;let idx=index">
   	    	<div class="m-tab-pane" *ngIf="idx===activeId">
   	    		<ng-template [ngTemplateOutlet]="tab.contentTpl.templateRef"></ng-template>
   	    	</div>
   	    </ng-container>
   </div>
</div>
